<template>
  <div v-if="cardType <= 8" :class="['container', customClass]">
    <img :src="require(`./img/${cardType}.png`)" alt="" class="image"  />
    <div class="context">
      <span class="title">{{ title | division }}</span>
      <span class="subtitle">{{ subtitle }}</span>
      <slot></slot>
    </div>
  </div>
  <div v-else :class="['container', customClass]">
    <div class="image-container" v-if='cardType!==10'>
      <img :src="require(`./img/2-1/private/${cardType-8}.png`)" :class="['image-private',{'run':run}]" alt="" />
      <img :src="require(`./img/2-1/public.png`)" alt="" class="image-public" />
    </div>
    <div class="image-container" v-else>
      <img :src="require(`./img/2-1/private/2-1.png`)" :class="['image-private',{'run':run}]" alt="" />
      <img :src="require(`./img/2-1/private/2-2.png`)" :class="['image-private',{'run2':run}]" alt="" />
      <img :src="require(`./img/2-1/public.png`)" alt="" class="image-public" />
    </div>
    <div class="context">
      <span class="title">{{ title | division }}</span>
      <span class="subtitle">{{ subtitle }}</span>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import { division } from "../data-v-rankList/util";
export default {
  name: "data-v-digitCard",
  filters: {
    division,
  },
  props: {
    cardType: {
      type: Number,
      default: 1,
    },
    title: {
      type: String | Number,
      default: "",
    },
    run:{
      type:Boolean,
      default:false
    },
    customClass: {
      type: String,
      default: "",
    },
    subtitle: {
      type: String,
      default: "",
    },
  },
};
</script>
<style lang="less" src='./index.less' scoped></style>